<template>
  <div class="app-container">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-col :span="10">
        <el-form-item label="收房合同编号" prop="sfContractNo">
          <el-input v-model="ruleForm.sfContractNo" :disabled="true" style="width: 60%;" />
          <el-button type="success" @click="contracts">收房合同查询</el-button>
        </el-form-item>
        <el-form-item label="房产信息" prop="houseName">
          <el-input v-model="ruleForm.houseName" :disabled="true" style="width: 60%;" />
        </el-form-item>
        <el-form-item label="业主姓名" prop="ownerName">
          <el-input v-model="ruleForm.ownerName" :disabled="true" style="width: 60%;" />
        </el-form-item>
        <el-form-item label="业主身份证号" prop="ownerIdCard">
          <el-input v-model="ruleForm.ownerIdCard" :disabled="true" style="width: 60%;" />
        </el-form-item>
        <el-form-item label="银行名称" prop="bankName">
          <el-input v-model="ruleForm.bankName" :disabled="true" style="width: 60%;" />
        </el-form-item>
        <el-form-item label="金融产品选择" prop="jrProductId">
          <el-select v-model="ruleForm.jrProductId" placeholder="请选择" @change="changeCreditLine">
            <el-option
              v-for="item in jrpro"
              :key="item.id"
              :label="item.jrProductName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="借款期限" prop="monthLimit">
          <el-input v-model="ruleForm.monthLimit" style="width: 60%;" />
        </el-form-item>
        <el-form-item label="借款金额" prop="loanAmount">
          <el-input v-model="ruleForm.loanAmount" :disabled="true" style="width: 60%;" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <br><br><br><br><br><br><br>
        <el-form-item label="业主手机号" prop="ownerMobile">
          <el-input v-model="ruleForm.ownerMobile" :disabled="true" style="width: 60%;" />
        </el-form-item>
        <el-form-item label="银行卡号" prop="bankCard">
          <el-input v-model="ruleForm.bankCard" :disabled="true" style="width: 60%;" />
        </el-form-item>
        <el-form-item label="开户行" prop="bankOpen">
          <el-input v-model="ruleForm.bankOpen" :disabled="true" style="width: 60%;" />
        </el-form-item>
        <el-form-item label="年利率" prop="rate">
          <el-input v-model="ruleForm.rate" style="width: 60%;" />
        </el-form-item>
        <el-form-item label="年一次性服务费率" prop="serviceFee">
          <el-input v-model="ruleForm.serviceFee" style="width: 60%;" />
        </el-form-item>
        <el-form-item label="授信额度" prop="creditLine">
          <el-input v-model="ruleForm.creditLine" :disabled="true" style="width: 60%;" />
        </el-form-item>
      </el-col>
    </el-form>

    <!-- Table -->

    <el-dialog title="收房合同查询" :visible.sync="dialogTableVisible">
      <el-form :inline="true" :model="pageInfo" class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-input v-model="pageInfo.premiseName" />
        </el-form-item>
        <el-form-item label="业主姓名">
          <el-input v-model="pageInfo.ownerName" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="gridData">
        <el-table-column property="ownerName" label="业主姓名" width="150" />
        <el-table-column property="houseName" label="房产信息" width="200" />
        <el-table-column property="conSignTime" label="签约日期" />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="xz(scope.row)">选中</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageInfo.pageNum"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="pageInfo.pageSize"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jrpro: [],
      total: null,
      pageInfo: {
        pageSize: null,
        pageNum: null,
        premiseName: '',
        ownerName: ''
      },
      ruleForm: {
        sfContractNo: '',
        houseName: '',
        ownerName: '',
        ownerMobile: '',
        ownerIdCard: '',
        bankCard: '',
        bankName: '',
        bankOpen: '',
        jrProductId: null,
        monthLimit: null,
        loanAmount: null,
        serviceFee: null,
        rate: null,
        creditLine: null
      },
      gridData: [],
      dialogTableVisible: false,
      rules: {
        sfContractNo: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        houseName: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        ownerName: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        ownerMobile: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        ownerIdCard: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        bankCard: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        bankName: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        bankOpen: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        rate: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        jrProductId: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        serviceFee: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        monthLimit: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        creditLine: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        loanAmount: [
          { required: true, message: '必填项', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    changeCreditLine() {
      this.axios.get('http://127.0.0.1/api/jr/wish/t-jr-product/getOneJrPro?id=' + this.ruleForm.jrProductId).then((response) => {
        console.log(response.data)
        this.ruleForm.creditLine = response.data.obj.creditLine
        this.ruleForm.monthLimit = response.data.obj.instalmentPeriod
      })
    },
    init() {
      this.axios.get('http://127.0.0.1/api/jr/wish/t-sf-contract/contracts', { params: this.pageInfo }).then((response) => {
        console.log(response.data)
        this.gridData = response.data.obj.list
        this.pageInfo.pageNum = response.data.obj.pageNum
        this.pageInfo.pageSize = response.data.obj.pageSize
        this.total = response.data.obj.pages
      })
      this.axios.get('http://127.0.0.1/api/jr/wish/t-jr-product/selectJrPro').then((response) => {
        console.log(response.data)
        this.jrpro = response.data.obj
      })
    },
    onSubmit() {
      this.init()
    },
    xz(row) {
      this.axios.get('http://127.0.0.1/api/jr/wish/t-sf-contract/getOne?id=' + row.id).then((response) => {
        console.log(JSON.stringify(response.data))
        this.ruleForm.sfContractNo = response.data.sfContractNo
        this.ruleForm.houseName = response.data.houseName
        this.ruleForm.ownerName = response.data.ownerName
        this.ruleForm.ownerMobile = response.data.ownerMobile
        this.ruleForm.ownerIdCard = response.data.ownerIdCard
        this.ruleForm.bankCard = response.data.bankCard
        this.ruleForm.bankName = response.data.bankName
        this.ruleForm.bankOpen = response.data.bankOpen
        this.ruleForm.loanAmount = response.data.balance
        this.dialogTableVisible = false
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageInfo.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageInfo.pageNum = val
      this.init()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    contracts() {
      this.dialogTableVisible = true
    }
  }
}
</script>
